<template>

    <div class="header-wrapper" @click= "handleChangeShow">
      <img class="header-img" :src="bannerImg" alt="">
      <div class="header-info">
        <div class="header-title">{{sightName}}</div>
        <div class="header-number">
          <span class ="iconfont banner-icon">&#xeb98;</span>
          <span>39</span>
        </div>
      </div>
    </div>

</template>
<script>
export default {
  name:'headd',
  props:{
    bannerImg:String,
    sightName:String
  },
  methods:{
    handleChangeShow(){
      this.$emit('changeIsShow',true)
    }
  }
}
</script>
<style lang="less" scoped>

    .header-wrapper{
      width: 100%;
      height: 0;
      padding-bottom: 55%;
      background-color: #ccc;
      position: relative;
      .header-img{
        width:100%;
        display: block;
      }
      .header-info{
        z-index: 1;
        position: absolute;
        height: .66rem;
        left:0;
        right: 0;
        bottom: 0;
        display: flex;
        color:#eee;
        justify-content: space-around;
        align-items: center;
        background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.5));
        .header-title{
          font-size: .25rem;
        }
        .header-number{
          padding:.05rem .3rem;
          border-radius: .24rem;
          background-color:rgba(0, 0, 0, .8);
          font-size: .24rem;
          .banner-icon{
            font-size: .24rem;
          }
        }
      }
    }
  
</style>
